<script setup>
import {onMounted, reactive, ref} from 'vue';
import axios from "axios";
import router from "@/router/index.js";
import {useRoute} from "vue-router";
import PageFooter from "@/components/PageFooter.vue";

const commentCount = ref(0);
const route = useRoute(); // 正确写法

function getCommentCount() {
  axios.get("http://127.0.0.1:8081/comments/getResult")
      .then((res) => {
        commentCount.value = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
}

onMounted(() => {
  getCommentCount();
});

// 定义一个响应式变量，用于控制显示的内容索引
const activeIndex = ref(0);
// 定义一个响应式变量，用于控制“推荐”文字的字体大小
const recommendFontSize = ref('2rem');

// 切换显示内容的函数
function showContent(index) {
  if (index === 1) {
    recommendFontSize.value = '2.5rem'; // 放大 index=1 的字体
  } else if (index === 0) {
    recommendFontSize.value = '2rem'; // 恢复 index=1 的字体大小
  }
  activeIndex.value = index;
}

const article = reactive({
  getAll: [],
  getList: []

});

function getAllIn() {
  axios.get("http://127.0.0.1:8081/art/getAllIn").then((res) => {
    article.getAll = res.data;
  })
      .catch((err) => {
        console.log(err);
      });
}

function getListIn() {
  axios.get("http://127.0.0.1:8081/art/getListIn").then((res) => {
    article.getList = res.data;
  })
      .catch((err) => {
        console.log(err);
      });
}

onMounted(() => {
  getAllIn();
  getListIn();
})

function tzh(id) {
  router.push(`/index/` + id)
}

//跳转到sosuo
function goToPinLun() {
  router.push({name: 'SearchContent'});
} // 跳转到 PinLun.vue

const FT = (OD) => {
  const date = new Date(OD)
  return date.toLocaleString("zh-CN", {hour12: false}).replace(/\//g, "-")
}
</script>

<template>
  <div class = "zt">
    <div class = "head">
      <div class = "head1">
        <p @click = "showContent(0)" :style = "{ fontSize: activeIndex === 0 ? '2.5rem' : '2rem' }">动态</p>
        <p @click = "showContent(1)" :style = "{ fontSize: activeIndex === 1 ? '2.5rem' : '2rem' }">推荐</p>
      </div>
      <div class = "head2">
        <img src = "../images/搜索.png" height = "40" width = "40" @click = "goToPinLun" />
        <img src = "../images/信封.png" height = "40" width = "40" />
      </div>
    </div>

    <!-- 动态内容 -->
    <div class = "content" :class = "{ active: activeIndex === 0 }">

      <h2 style = "margin: 10px">盒友动态</h2>
      <div v-for = "item in article.getAll" :key = "item.id" @click = "tzh(item.id)">
        <div class = "tx1">
          <div class = "tx">
            <img :src = "`${item.userAvatar}`" width = "60" height = "60" />
          </div>
          <p>{{ item.name }}</p>
          <div class = "lv7"><p>Lv.7</p></div>
        </div>
        <div>
          <h2>{{ item.title }}</h2>
          <p>{{ item.content }}</p>
          <div class = "tu">
            <img :src = "`${item.picPath}`" />


          </div>
        </div>
        <div>
          <div class = "wei">
            <div class = "wei1">
              <p>{{ FT(item.time) }}</p>
              <p>{{ item.type }}</p>
            </div>
            <div class = "wei2">
              <img src = "../images/评论2 (1).png" height = "32" width = "32" />
              <p>{{ commentCount }}</p>
              <img src = "../images/点赞_块.png" height = "32" width = "32" />
              <p>{{ item.like_count }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐内容 -->
    <div class = "content" :class = "{ active: activeIndex === 1}">

      <div class = "lb">
        <div>
          <div class = "pc">
            <img src = "../images/推荐/pc游戏.jpg" height = "210" width = "210" />
          </div>
          <p>pc端</p>
        </div>
        <div>
          <div class = "pc">
            <img src = "../images/推荐/Steam.png" height = "210" width = "210" />
          </div>
          <p>Steam</P>
        </div>
        <div>
          <div class = "pc">
            <img src = "../images/推荐/盒友杂谈.jpg" height = "210" width = "210" />
          </div>
          <p>盒友杂谈</P>
        </div>
        <div>
          <div class = "pc">
            <img src = "../images/推荐/主机游戏.jpg" height = "210" width = "210" />
          </div>
          <p>主机游戏</P>
        </div>
        <div>

          <div class = "pc">
            <img src = "../images/推荐/手机游戏.jpg" height = "210" width = "210" />
          </div>
          <p>手机游戏</P>
        </div>
        <div>

          <div class = "pc">
            <img src = "../images/推荐/数码硬件.jpg" height = "210" width = "210" />
          </div>
          <p>数码硬件</P>
        </div>
      </div>
      <div v-for = "list in article.getList" :key = "list.id" @click = "tzh(list.id)">

        <div class = "tx1">
          <div class = "tx">
            <img :src = "`${list.userAvatar}`" width = "60" height = "60" />
          </div>
          <p>{{ list.name }}</p>
          <div class = "lv7"><p>Lv.7</p></div>
        </div>
        <div>
          <h2>{{ list.title }}</h2>
          <p>{{ list.content }}</p>


          <div class = "tu">
            <img :src = "`${list.picPath}`" />
          </div>

        </div>
        <div>
          <div class = "wei">
            <div class = "wei1">
              <p>{{ list.time }}</p>
              <p>{{ list.type }}</p>
            </div>
            <div class = "wei2">
              <img src = "../images/评论2 (1).png" height = "32" width = "32" />
              <p>{{ commentCount }}</p>
              <img src = "../images/点赞_块.png" height = "32" width = "32" />
              <p>{{ list.like }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <PageFooter />
</template>

<style scoped>

.lb {
  display: flex;
  overflow-x: auto; /* 允许横向滚动 */
  white-space: nowrap; /* 防止子元素换行 */
  align-items: center;
  scrollbar-width: none; /* 隐藏滚动条（Firefox） */
}


.pc {
  margin-top: 5px;
  margin-bottom: 10px;
  display: inline-block; /* 使子元素横向排列 */
  margin-right: 20px; /* 可选：为每个图片添加间距 */
}

.pc img {
  width: 60px;
  height: 60px;
}

.content {
  display: none;
}

.content.active {
  display: block;
}

.wei2 p {
  padding: 5px;
}

.wei2 {
  display: flex;
  align-items: center;
}

.wei2 img {
  margin-left: 40px;
}

.wei1 p {
  padding: 10px;
}

.wei1 {
  display: flex;
  align-items: center;

}

.wei {
  display: flex;
  justify-content: space-between;
}

.tu {
  width: 150px;
  height: 100px;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Ensures the image doesn't overflow */
}


.tu img {
  max-width: 100%;
  max-height: 100%;
}

.tx1 {
  display: flex;
  align-items: center;
}

.lv7 {
  margin-left: 10px;
  background-color: #3498db;
  width: 40px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.tx {
  width: 50px;
  height: 50px;

  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Ensures the image doesn't overflow */
  margin-right: 10px;
}

.tx img {
  max-width: 100%;
  max-height: 100%;
}

.head2 img {
  margin-left: 20px;
}

.head1 p {
  padding: 5px;
}

.head1 {
  display: flex;
  font-size: 2rem;
}

.zt {
  width: 430px;
  padding: 20px;
  background-color: #f2f2f2;
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>